<template>
  <div id="taxcode">
    <h1>税目编码列表</h1>
    <div class="tax_wrap">
      <el-form ref="form" class="commonFrom" label-width="70px">
        <el-form-item label="检索：" required>
          <el-input size="small" placeholder="" v-model.trim="seachValue"> </el-input>
          <el-button size="mini" class="commonBtn1 add" @click="search"> 搜索 </el-button>
        </el-form-item>
      </el-form>

      <el-table
        v-show="show"
        :data="tableData"
        class="table"
        height="258px"
        border
        tooltip-effect="light"
        ref="jdjgTable"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column width="60" align="center" type="index" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="编码" align="center" prop="code" width="200"> </el-table-column>
        <el-table-column label="分类名称" align="center" prop="name" width="140" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="说明" align="center" prop="description" show-overflow-tooltip> </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-button type="text" class="xg czBtn" size="small" @click="handleClick(scope.row)"> 添加 </el-button>
          </template>
        </el-table-column>
      </el-table>

      <element-pagination
        :Total="total"
        :pageSize="[6, 24, 48, 96]"
        @getData="getPagChange"
        v-show="show"
      ></element-pagination>
      <div class="nocontent_bg" v-show="!show">
        <el-image :src="require('@/assets/role_bg2.png')"></el-image>
        <p style="color: #999999">暂无检索结果，请在上面输入文字进行搜索～</p>
      </div>
    </div>
    <h1>本次添加编码</h1>
    <div class="add_wrap">
      <el-table
        v-show="addData.length"
        :data="addData"
        class="table"
        height="258px"
        border
        tooltip-effect="light"
        ref="jdjgTable"
        :header-cell-style="{
          padding: '0px',
          background: 'linear-gradient(0deg, #F4F6F9, #EAECF4, #F3F6F9)'
        }"
        :row-class-name="tabRowClassName"
        header-row-class-name="mapTable_th"
      >
        <el-table-column width="60" align="center" type="index" label="序号">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column label="编码" align="center" prop="itemCode" width="200"> </el-table-column>
        <el-table-column label="分类名称" align="center" prop="itemName" width="140" show-overflow-tooltip>
        </el-table-column>
        <el-table-column label="商品名称" align="center" prop="goodsName">
          <template slot-scope="scope">
            <el-input size="small" placeholder="请输入商品名称" v-model.trim="scope.row.goodsName"> </el-input>
          </template>
        </el-table-column>
        <el-table-column label="税率%" align="center" prop="rate">
          <template slot-scope="scope">
            <el-input size="small" placeholder="请输入税率" v-model.trim="scope.row.rate"> </el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="80">
          <template slot-scope="scope">
            <el-button type="text" class="ty czBtn" size="small" @click="deleteClick(scope.$index)"> 删除 </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="nocontent_bg" style="height: 100%" v-show="!addData.length">
        <el-image :src="require('@/assets/role_bg2.png')"></el-image>
        <p style="color: #999999">请在上方检索结果中选择分类并添加～</p>
      </div>
    </div>

    <div class="footer">
      <el-button size="small" class="commonBtn" @click="closeBtn">取消</el-button>
      <el-button size="small" class="commonBtn1" @click="subBtn">确定</el-button>
    </div>
  </div>
</template>

<script>
import ElementPagination from '../../../../components/ElementPagination.vue'
export default {
  components: { ElementPagination },
  data() {
    return {
      addData: [],
      show: false,
      tableData: [],
      seachValue: '',
      page: 1,
      size: 6,
      total: 0
    }
  },
  mounted() {},
  methods: {
    handleClick(scope) {
      this.addData.push({
        itemCode: scope.code,
        itemName: scope.name,
        goodsName: '',
        rate: ''
      })
    },
    // 子组件抛出的分页触发事件
    getPagChange(data) {
      this.page = data.currentPage
      this.size = data.pagesize
      this.search()
    },
    // 提交本次新增税目编码
    subBtn() {
      let flag = this.addData.forEach(item => {
        return !item.goodsName || !item.rate
      })
      if (!this.addData.length) {
        this.$message.error('请添加编码')
        return
      } else if (flag) {
        this.$message.error('请填写完整需要添加的编码商品名称与税率')
        return
      }
      this.$https({
        method: 'post',
        url: '/enterpriseVat/add',
        data: this.addData
      })
        .then(res => {
          if (res.code == 0) {
            this.$message.success(res.msg)
            this.$emit('close', 'init')
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 触发抛出事件 关闭弹窗
    closeBtn() {
      this.$emit('close', '')
    },
    // 模糊搜索获取税目编码列表
    search() {
      if (!this.seachValue) {
        this.show = false
        this.$message.error('请输入分类编码、分类名称或商品名称搜索')
        return
      }

      this.$https({
        method: 'post',
        url: '/vat/getList',
        data: {
          page: this.page,
          size: this.size,
          code: this.seachValue
        }
      })
        .then(res => {
          if (res.code == 0) {
            this.show = true
            this.total = res.data.total
            this.tableData = res.data.records
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    tabRowClassName({ row, rowIndex }) {
      let index = rowIndex + 1
      if (index % 2 == 0) {
        return 'warning-row'
      }
    },
    // 删除添加的税目编码
    deleteClick(scope) {
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.addData.splice(scope, 1)
      })
    }
  }
}
</script>
<style lang="less" scoped>
.ty {
  color: #ff3d3d;
}
h1 {
  position: relative;
  font-size: 16px;
  font-weight: 500;
  color: #333;
  padding-left: 10px;
  border-left: 4px solid #fa7355;
  span {
    font-size: 14px;
    font-weight: normal;
    color: #999;
  }
  .check {
    font-weight: 400;
    font-size: 14px;
    color: #fa7355;
  }
}
.tax_wrap {
  padding: 16px 20px 20px;
  height: 374px;
  margin: 20px 0 30px;
  border: 1px solid #d6d6d6;
}
.add_wrap {
  padding: 20px;
  height: 260px;
  margin-top: 20px;
  border: 1px solid #d6d6d6;
}
.add {
  height: 32px;
  // width: 60px;
  margin-left: 10px;
  padding: 0;
}
.commonFrom {
  width: 100% !important;
  .el-form-item {
    width: 100% !important;
    margin: 0;
  }
  /deep/.el-form-item__content {
    display: flex;
    align-items: center;
  }
  /deep/.el-input {
    width: 580px;
  }
  /deep/ .el-input__inner {
    width: 100% !important;
  }
}
.nocontent_bg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 320px;
}
.footer {
  .commonBtn,
  .commonBtn1 {
    width: 130px;
  }
  text-align: center;
  margin-top: 40px;
}
</style>
